<template>
  <div class="dashboard-analysis">
    <div class="coms">
      <div class="com">
        <div class="coml">
          <p>{{ date }}</p>
          <p>{{ moment().format('dddd') }}</p>
        </div>
        <div class="hea">欢迎来到{{ title }}</div>
        <div class="comr">
          <iframe width="250" height="160" frameborder="0" allowtransparency="true"
            src="https://i.tianqi.com?c=code&id=35&color=%23ffffff&icon=1&py=qinshui&site=34"></iframe>
        </div>
      </div>
      <div class="contV">
        <div class="contVls">
          <div class="work">
            <div class="worki" v-for="(i, o) in menus" :key="o">
              <div class="workin"><a target="_blank" :href="i.path">{{ i.name }}</a></div>
            </div>
            <div class="worki">
              <div class="workin"><a target="_blank">更多内容敬请期待！</a></div>
            </div>
          </div>
        </div>
        <div class="contVrs">
          <div class="mainVt">
            <div class="mainVti">
              <div>医院数量：</div>
              <p>
                <CountTo class="minScleic" :startVal='0' :endVal='tdata.hospital' :duration='2000' />
              </p>
            </div>
            <div class="mainVti">
              <div>科室数量：</div>
              <p>
                <CountTo class="minScleic" :startVal='0' :endVal='tdata.hospital' :duration='2000' />
              </p>
            </div>
            <div class="mainVti">
              <div>医生数量：</div>
              <p>
                <CountTo class="minScleic" :startVal='0' :endVal='tdata.dept' :duration='2000' />
              </p>
            </div>
            <div class="mainVti">
              <div>就诊人数：</div>
              <p>
                <CountTo class="minScleic" :startVal='0' :endVal='tdata.doctor' :duration='2000' />
              </p>
            </div>
            <div class="mainVti">
              <div>访问量：</div>
              <p>
                <CountTo class="minScleic" :startVal='0' :endVal='tdata.systemVisit' :duration='2000' />
              </p>
            </div>
          </div>
          <Liveness :isAdmin="true" date="3" orgId="1896206093973979137" />
          <div class="contVrse">
            <Case :isAdmin="true" date="3" orgId="1896206093973979137" />
            <Consultation :isAdmin="true" date="3" orgId="1896206093973979137" />
          </div>
        </div>
        <div class="conter">
          <div class="contVrsi">

            <div class="contVl">
              <div class="contVlt">
                <div class="user">
                  <a-avatar class="avatar" size="small" :src="getAvatar()" />
                  <p>Hi，{{ nickname() }}</p>
                </div>

                <div class="usermenu">
                  <header-notice class="action" />
                  <div class="usermenub"></div>
                  <a class="logout_title" href="javascript:;" @click="handleLogout">
                    <a-icon type="logout" />
                    <span>&nbsp;退出</span>
                  </a>
                </div>
                <div class="userSets">
                  <div class="userSet" @click="openSet">
                    <a-icon type="setting" />
                    <span>&nbsp;修改密码</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="ctgts">
              <div class="ctgt"><span></span>系统通告</div>
              <div class="ctgc">
                <div class="ctgci" v-for="(i, o) in tgList" :key="o">
                  <a-popover trigger="click">
                    <template slot="content">
                      <div>{{ i.msgAbstract }}</div>
                      <div  v-html="i.msgContent"></div>
                    </template>
                    <div class="ctgcic">
                      <div class="ctgcil">{{ i.titile }}</div>
                      <div class="ctgcir">{{ i.createTime.split(' ')[0] }}</div>
                    </div>
                  </a-popover>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
    <QuickConsultation ref="QuickConsultation" />
    <user-password ref="userPassword"></user-password>

  </div>
</template>

<script>
import { getAction, deleteAction, putAction, postAction, httpAction, getFileAccessHttpUrl } from '@/api/manage'
import moment from 'moment'
import HeaderNotice from '@/components/tools/HeaderNotice'
import CountTo from 'vue-count-to'
import { filterMenu } from '@/utils/util'
import { mapActions, mapGetters, mapState } from 'vuex'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import QuickConsultation from './modules/QuickConsultation'
import Consultation from '../wz/analysis/modules/Consultation.vue'
import Case from '../wz/analysis/modules/Case.vue'
import Liveness from '../wz/analysis/modules/Liveness.vue'
import UserPassword from '../../components/tools/UserPassword'

export default {
  name: 'Analysis',
  components: { CountTo, QuickConsultation, HeaderNotice, UserPassword, Case, Consultation, Liveness },
  data() {
    return {
      moment,
      menus: [],
      title: process.env.VUE_APP_PLATFORM_NAME,
      date: moment().format('YYYY-MM-DD HH:mm:ss'),
      dateFun: null,
      tgList: [],
      tdata: {},

    }
  },
  created() {
    this.getDate();
    moment.locale('zh-cn');
    this.menus = [
      { name: '远程一体化诊断平台', path: `https://www.ysrs.xyz/healthMgScreen/dashboard/analysis?ACTK=${this.$ls.get(ACCESS_TOKEN)}` },
      { name: 'AI医疗诊断辅助', path: `https://yuanqi.tencent.com/agent/pscaIfooR7uI?from=share` },
      { name: '医生排班管理', path: `https://www.ysrs.xyz/healthMg/wz/schedule/WzScheduleList` },
      { name: '在线问诊', path: `https://www.ysrs.xyz/healthMg/wz/online/WzOnlineInquiryList` },
      { name: '质量报告监管', path: `https://www.ysrs.xyz/healthMg/wz/heal/WzHealRecordListp` },
      { name: '数据可视化', path: `https://www.ysrs.xyz/healthMg/wz/analysis/analysis1` },
    ]
    getAction('/sys/annountCement/list', {
      column: 'createTime',
      order: 'desc', pageNo: 1,
      pageSize: 999
    }).then(res => {
      this.tgList = res.result.records
    })
    getAction('/wz/statistics/findBasic', { dateType: 1, hospId: '1896206093973979137' }).then(res => {
      this.tdata = res.result
    })
  },
  computed: {
    ...mapState({
      // 主路由
      mainRouters: state => state.permission.addRouters,
      // 后台菜单
      permissionMenuList: state => state.user.permissionList
    })
  },
  mounted() {

  },
  methods: {
    openSet() {
      let username = this.userInfo().username
      this.$refs.userPassword.show(username)
    },
    headerRender({ value, type, onChange, onTypeChange }) {
      return (<span></span>);
    },
    ...mapActions(["Logout"]),
    ...mapGetters(["nickname", "avatar", "userInfo"]),
    getAvatar() {
      return getFileAccessHttpUrl(this.avatar())
    },
    handleLogout() {
      const that = this
      this.$confirm({
        title: '提示',
        content: '真的要注销登录吗 ?',
        onOk() {
          return that.Logout({}).then(() => {
            // update-begin author:wangshuai date:20200601 for: 退出登录跳转登录页面
            that.$router.push({ path: '/user/login' })
            window.location.reload()
            // update-end author:wangshuai date:20200601 for: 退出登录跳转登录页面
          }).catch(err => {
            that.$message.error({
              title: '错误',
              description: err.message
            })
          })
        },
        onCancel() {
        },
      })
    },
    getDate() {
      const that = this
      that.dateFun = setInterval(() => {
        that.date = that.moment().format('YYYY-MM-DD  HH:mm:ss')
      }, 1000)
    }
  },
  beforeDestroy() {
    clearInterval(this.dateFun)
    this.dateFun = null
  }
}
</script>

<style lang="less" scoped>
.coms {
  user-select: none;
  min-height: 700px;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}

.com {
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: #fff;
  text-shadow: 0 0 8px #000;

  .hea {
    padding: 0 50px;
    font-size: 33px;
    font-weight: bolder;
    background: #077762;
    box-shadow: 0 0 12px #00423688;
    border-radius: 12px;
    height: 100px;
    line-height: 100px;
    width: 52vw;
    text-align: center;
  }

  .coml {
    width: 20vw;
    background: #077762;
    box-shadow: 0 0 12px #00423688;
    border-radius: 12px;
    display: flex;
    align-items: center;
    height: 100px;
    justify-content: space-around;

    p {
      font-size: 22px;
      text-align: center;
    }

    p:first-of-type {
      font-size: 26px;
    }
  }

  .comr {
    width: 20vw;
    padding-left: 30px;
    box-shadow: 0 0 12px #00423688;
    background: #077762;
    height: 100px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}



p {
  margin: 0;
}

.contV {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;



  .userSets {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .userSet {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 22px;
      width: 260px;
      height: 52px;

      &:hover {
        cursor: pointer;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 0 8px #ccc;

        i,
        span {
          color: #03a386;
        }
      }
    }
  }


}



/deep/ .ctgcic {
  color: #fff;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  box-sizing: border-box;
  text-shadow: 0 0 8px #333;

  &:hover {
    border-bottom: 1px solid #fff;
  }

  .ctgcil {
    width: 280px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}

.contVls {
  width: 20vw;
  background: linear-gradient(to right, #08816b22, #16947d22);
  box-shadow: 0 0 12px #00423633;
  border-radius: 12px;

  .work {
    display: flex;
    flex-wrap: wrap;
    width: 20vw;
    max-height: 770px;
    overflow-y: auto;

    .worki {
      box-sizing: border-box;
      box-shadow: 0 0 12px #00423688;
      // box-shadow: 0 0 12px #1890ff77;
      border-radius: 12px;
      display: flex;
      align-items: center;
      margin: 10px auto;
      transition: all .8s;
      cursor: pointer;
      position: relative;
      background: linear-gradient(to right, #08816b, #16947d);
      // background: linear-gradient(to right, #40a9ff, #1890ff);
      text-shadow: 0 0 8px #333;
      width: 18vw;
      height: 88px;
      padding: 0 20px;

      &:hover {
        background-size: 200% 200%;
        background-position: -100% -100%;
      }

      .workin {
        font-weight: bold;

        a {
          width: 17vw;
          line-height: 88px;
          height: 88px;
          font-size: 22px;
          letter-spacing: 2px;
          color: #fff;
          text-align: center;
          display: block;
        }
      }
    }
  }
}

.contVrs {
  width: 52vw;


}

.conter {
  width: 20vw;

  .contVrsi {
    display: flex;
    flex-direction: column;
    align-items: center;

    .ctgts {
      width: 20vw;
      height: 550px;
      border-radius: 12px;
      background: linear-gradient(to right, #08816b, #16947d);
      box-shadow: 0 0 12px #00423688;
      padding: 10px;
      text-shadow: 0 0 8px #333;

      .ctgt {
        display: flex;
        align-items: center;
        height: 32px;
        color: #fff;
        font-size: 20px;
        margin-bottom: 10px;

        span {
          margin-right: 10px;
          display: inline-block;
          width: 4px;
          height: 28px;
          border-radius: 3px;
          background-color: #fff;
        }

        .ctgc {
          max-height: 230px;
          overflow-y: auto;

          .ctgci {}
        }
      }
    }

    .contVl {
      width: 20vw;
      margin-bottom: 20px;
      height: 200px;
      border-radius: 12px;
      background: linear-gradient(to right, #08816b, #16947d);
      box-shadow: 0 0 12px #00423688;
      cursor: pointer;
      transition: all .8s;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      &:hover {
        background-size: 200% 200%;
        background-position: -100% -100%;
        box-shadow: 0 0 12px #03a386;
      }

      .contVli {
        width: 20vw;
        color: #fff;
        text-shadow: 0 0 12px #333;
        height: 300px;
        text-align: center;
        font-weight: bold;
        font-size: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        img {
          width: 100px;
          height: 100px;
        }


      }

      .user {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60px;

        .avatar {
          width: 60px;
          height: 60px;
        }

        p {
          margin: 0 0 0 20px;
          color: #fff;
          font-size: 23px;
        }
      }

      .usermenu {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60px;
        color: #fff;

        .usermenub {
          width: 2px;
          height: 36px;
          background-color: #fff;
          margin: 0 20px;
        }

        /deep/ .ant-badge {
          span {
            font-size: 22px;
            color: #fff;
          }

          a {
            display: flex;
            align-items: center;
            width: 160px;
            justify-content: center;
            font-size: 22px;
            color: #fff;
            height: 42px;

            &:hover {
              cursor: pointer;
              background-color: #fff;
              border-radius: 8px;
              box-shadow: 0 0 8px #ccc;

              i,
              span {
                color: #03a386;
              }
            }
          }
        }

        /deep/ i {
          font-size: 28px !important;
          color: #fff;

        }

        a {
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          font-size: 22px;
          width: 160px;
          height: 42px;

          &:hover {
            cursor: pointer;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 8px #ccc;

            i,
            span {
              color: #03a386;
            }
          }
        }
      }
    }
  }

}

.mainVt {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;

  .mainVti {
    width: 10vw;
    background-color: #077762;
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 0 12px #00423688;
    height: 60px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    text-shadow: 0 0 8px #000;

    div {
      font-size: 18px;
    }

    p {
      font-weight: bold;
    }
  }
}

.contVrse {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>